<template>
    <el-form :data="form">
        <el-form-item label="商品名称">
            <el-input v-model="form.keyword" />
        </el-form-item> 
         <el-form-item>
            <el-button @click="searchHandle">搜索</el-button>
         </el-form-item>
    </el-form>
    <el-table :data="list">
        <el-table-column prop="name" label="产品名称" />
        <el-table-column prop="description" label="产品介绍" />
    </el-table>
    <ElConfigProvider :locale="zhCn">
        <div class="page">
            <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
                background layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="pageChangeHandle" @current-change="pageSizeChangeHandle" />
        </div>
    </ElConfigProvider>
</template>
<script setup lang='ts'>
import useTable from '@/hooks/useTable'
import { getProducListApi } from './api'
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import { reactive } from 'vue';

const form = reactive({
    keyword:""
})

const { list, pageNum, pageSize, total, pageChangeHandle, pageSizeChangeHandle,searchHandle } = useTable(getProducListApi,form);


</script>
<style lang="less" scoped>
.page {
    padding: 20px;
    display: flex;
    justify-content: flex-end;
}
</style>